/*
 * @Author: yangrongxin
 * @Date: 2021-09-02 09:33:53
 * @LastEditors: yangrongxin
 * @LastEditTime: 2022-01-18 17:37:36
 */
import { View, ScrollView } from '@tarojs/components';
import styles from './index.module.less';

const TableEle = (props: { title?: string; list: string[] }) => {
  const { title = '', list = [] } = props;
  return (
    <View className={styles.rightFixedContent}>
      {/* 展示顶部的空白区域 */}
      {/* <View className={title ? styles.rowSpanTwo : ''}>{title}</View> */}
      <View className="">{title}</View>
      {list.map((item: string) => {
        return <View key={item}>{item}</View>;
      })}
    </View>
  );
};

// 自定义展示tableTr的元素
const TableTrEle = (props: any) => {
  const { list, repeatCount = -1 } = props;
  let repeatArr = [...list] || [];

  for (let k = 0; k < repeatCount - 1; k += 1) {
    repeatArr = repeatArr.concat(list);
  }

  return (
    <View className={styles.tableTrContainer}>
      <View className={styles.tableTr}>
        {repeatArr.map((item: string) => {
          return <View key={`${Math.random()}${item}`}>{item}</View>;
        })}
      </View>
    </View>
  );
};

/*
 * 用于进行展示数据的滚动table
 */
const ScrollDataTable = (props: any) => {
  const {
    tableHeaderList = ['男', '女', '总数'],
    tableHeaderData = [
      {
        title: '人数',
        data: ['1', '15', '16'],
      },
      {
        title: '百分比',
        data: ['6.25%', '93.75%', '100%'],
      },
    ],
    tableHeaderListClassTitle = '',
    tableHeaderListClass = [],
  } = props;
  const list = tableHeaderData.map((item: any) => item.title);
  const listData = tableHeaderData.map((item: any) => item.data);

  return (
    <View className={styles.container}>
      {/* 左边固定的区域 */}
      <TableEle list={list} title={tableHeaderListClassTitle} />
      {/* 右边滚动的区域 */}
      <ScrollView scrollX scrollWithAnimation className={styles.leftScrollContentWapper}>
        <View className={styles.leftScrollContent}>
          {/* 第一行的头部 */}
          <TableTrEle list={tableHeaderList} />
          {/* 第二行的头部 */}
          {Array.isArray(tableHeaderListClass) && tableHeaderListClass.length !== 0 && (
            <TableTrEle repeatCount={tableHeaderList.length} list={tableHeaderListClass} />
          )}
          {/* 数据行的展示 */}
          {listData.map((item: any, index: number) => {
            return <TableTrEle list={item} key={String(index)} />;
          })}
        </View>
      </ScrollView>
    </View>
  );
};

export default ScrollDataTable;
